import React, { Component } from 'react'
import { Carousel } from "antd-mobile"
import { connect } from "react-redux"
import { get } from "../../../utils/http"
import { loadData } from "../../../store/actions/load"
import "./index.css"
import { SwiperWrao } from "../styledControl/Styled"
class Swiper extends Component {
    async componentDidMount() {
        let result = await get({url: "/api/list"})
        // console.log(result.data);
        this.props.loadData(result.data)
    }

    render() {
        return (
            <div className="swiper">
                <SwiperWrao>
                    {
                        this.props.list.length && 
                        <Carousel
                        autoplay={false}
                        infinite
                        beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                        afterChange={index => console.log('slide to', index)}
                        >
                        {
                            this.props.list.slice(0, 5).map(value => (<img key={value.id} src={value.img} alt={value.id + 1}></img>))
                        }
                        </Carousel>
                    }
                </SwiperWrao>
            </div>
        )
    }
}

export default connect(
    state => ({
        list: state.load
    }),
    {
        loadData,
    }
)(Swiper)